<template>
  <gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage">
    <template v-slot:gBody>
      <view class="gui-flex1 gui-flex gui-column">
        <!-- 主体区域 -->
        <view class="gui-flex gui-flex1 gui-relative">
          <!-- 左侧分类列表 -->
          <scroll-view :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="leftTo"
            class="gui-cate-left gui-bg-white gui-dark-bg-level-3 gui-absolute-full">
            <view class="gui-cate-left-item gui-border-box" v-for="item in mainCate" :key="item.id"
              :class="[currentCateIndex == item.id ? 'gui-cate-left-current' : '']" :id="'cate' + item.id">
              <text class="gui-border-l"
                :class="['gui-cate-left-item-title', 'gui-block', currentCateIndex == item.id ? 'gui-cate-left-current' : '']"
                :data-cateid="item.id" @tap="changCate">
                {{ item.categoryName }}
              </text>
            </view>
          </scroll-view>
          <!-- 右侧列表 -->
          <scroll-view @scrolltolower="scrolltolower" :refresher-triggered="isTriggered" refresher-enabled
            @refresherrefresh="refresherrefresh" :scroll-into-view="productListTo" :show-scrollbar="false"
            :scroll-with-animation="true" :scroll-y="true" class="gui-cate-right gui-absolute-full" @scroll="rscroll">
            <view @click="goToDetail(cate.id)"
              class="gui-bg-white gui-border-radius gui-padding gui-flex gui-margin-top" :id="'productList' + cate.id"
              v-for="(cate, idx) in businessList" :key="cate.id" style="padding-left: 10rpx">
              <view>
                <image :src="baseUrl + cate.image" mode="aspectFill" style="width: 160rpx; height: 160rpx"></image>
              </view>
              <view class="gui-flex1" style="margin-left: 10rpx">
                <view class="gui-h6 nameH6">
                  {{ cate.address }}
                </view>
                <view class="gui-flex" style="margin-top: 20rpx; font-size: 12px" v-if="cate.distance">
                  <!-- <text style=" text-overflow: ellipsis; overflow: hidden;">进六月有80人咨询</text> -->
                  <text class="gui-icons" style="color: #a2a2a2">&#xe61c; {{ cate.distance }}km</text>

                </view>
                <text v-else>&nbsp; </text>
                <view class="gui-flex gui-nowrap gui-overflow-hidden"
                  style="width: 100%; font-size: 12px; margin-top: 20rpx ">
                  <view class="gui-border gui-border-radius gui-flex-shrink0"
                    style="margin-right: 8rpx; height: 30rpx; line-height: 30rpx; text-align: center; padding: 10rpx"
                    v-for="item in cate.categoryList">
                    {{ item.categoryName }}
                  </view>
                </view>
              </view>
            </view>
            <!-- </view> -->
          </scroll-view>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script>
  import graceJS from '@/Grace6/js/grace.js';
  import cateChangeData from '@/Grace6/demoData/cateChange.js';
  export default {
    data() {
      return {
        img: 'https://images.unsplash.com/photo-1660505465468-c898ea7ff674?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDQ2fHhqUFI0aGxrQkdBfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=200&q=90',
        // 全屏加载，当数据请求完毕时关闭
        pageLoading: true,
        // 核心区域高度
        mainHeight: 300,
        // 左侧分类定位
        leftTo: 'cate',
        // 标识切换时左侧点击触发的
        isLeftTap: false,
        // 左侧分类数据
        mainCate: [],
        // 当前分类
        currentCateIndex: 1,
        // 延迟执行防止卡顿
        scrollTimer: null,
        // 产品列表滚动定位
        productListTo: '',
        // 选中选项的 索引
        currentTabIndex: 0,
        // 右侧分类数据
        businessList: [],
        baseUrl: uni.gRequest.file,
        // 二级目录显示限制条数限制条件
        // page: {
        //   pageNum: 1,
        //   pageSize: 20
        // },
        // 当前一级分类的id
        firstId: null,
        // 自定义下拉状态
        // isTriggered: false
      };
    },
    onLoad: async function(e) {
      // 设置动态navTitle
      uni.setNavigationBarTitle({
        title: e.id === 10 ? '菜品搭配' : "场地布置"
      })
      // 获取一级列表
      const res = await uni.gRequest.get('category/listnopage', {
        parent: e.id
      });
      this.mainCate = res.data

      // 获取商家列表
      this.businessList = []
      this.firstId = res.data[0].id
      // this.getBusinessList(res.data[0].id)
      this.getBusinessList(this.firstId)

      // 获取页面主体高度从而得出主体高度
      graceJS.getRefs('guiPage', this, 0, (ref) => {
        ref.getDomSize('guiPageBody', (e) => {
          // 02. 导航的高度
          // 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
          this.mainHeight = e.height - uni.upx2px(110);
          setTimeout(() => {
            this.pageLoading = false;
          }, 1000)

        });
      });
    },

    methods: {
      // 跳转到详情页
      goToDetail(id) {
        uni.navigateTo({
          url: '/pages/product/shopDetail?id=' + id
        })
      },
      // scroll-view自定义下拉
      // async refresherrefresh() {
      //   // console.log(123);id
      //   this.isTriggered = true
      //   this.page.pageNum = 1
      //   this.businessList = []
      //   await this.getBusinessList(this.firstId)
      //   this.isTriggered = false

      // },
      // scrolltolower() {
      //   // console.log(123);
      //   this.getBusinessList(this.firstId)
      // },
      async getBusinessList(id) {
        // console.log(JSON.parse(uni.getStorageSync('cityAllLocation')).longitude);
        const cityAllLocation = JSON.parse(uni.getStorageSync('cityAllLocation'));
        // 获取不分页列表
        const res = await uni.gRequest.get('shop/list', {
          // 获取分页列表
          // const res = await uni.gRequest.get('shop/page', {
          // categorys: res.data[0].id,
          categorys: id,
          longitudes: cityAllLocation.longitude,
          latitudes: cityAllLocation.latitude,
          // 获取分页列表的参数
          // pageNum: this.page.pageNum,
          // pageSize: this.page.pageSize
        })
        // this.page.pageNum++

        // console.log(45656, res);
        //  获取不分页列表
        this.businessList = res.data;
        //  获取分页列表
        // this.businessList = [...this.businessList, ...res.rows];
        // console.log('businessList', this.businessList);
      },



      // 得到商店标签描述
      changCate: async function(e) {
        this.isLeftTap = true;
        var cateid = e.currentTarget.dataset.cateid;
        this.firstId = cateid
        // console.log(cateid);
        this.currentCateIndex = cateid;
        if (cateid == 1) {
          this.productListTo = 'productList2';
          this.$nextTick(() => {
            this.productListTo = 'productList' + cateid;
          });
        } else {
          this.productListTo = 'productList' + cateid;
        }
        setTimeout(() => {
          this.isLeftTap = false;
        }, 3000)

        // 获取商家列表
        this.businessList = [];
        this.getBusinessList(cateid)

      },
      rscroll: function(e) {
        if (this.isLeftTap) {
          return;
        }
        if (this.scrollTimer != null) {
          clearTimeout(this.scrollTimer);
        }
        this.scrollTimer = setTimeout(() => {
          this.getIndex();
        }, 100);
      },
      // 动态识别分类激活
      getIndex: function(i) {
        const query = uni.createSelectorQuery();
        query.selectAll('.gui-cate-product-list').boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec((res) => {
          var products = res[0];
          for (let i = 0; i < products.length; i++) {
            if (products[i].top > 0 && products[i].top >= this.mainHeight / 2) {
              (this.currentCateIndex = products[i].dataset.parentid), (this.leftTo = 'cate' + products[i].dataset
                .parentid);
              break;
            }
          }
        });
      }
    },

  };
</script>
<style scoped>
  .nameH6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    width: 300rpx;

  }

  .header-search {
    padding: 20rpx 80rpx;
    width: 750rpx;
  }

  .gui-cate-left {
    width: 200rpx;
  }

  .gui-cate-right {
    width: 520rpx;
    left: 230rpx;
  }

  .gui-cate-left-item {
    height: 100rpx;
    padding: 35rpx 0;
    font-size: 26rpx;
  }

  .gui-cate-left-item-title {
    line-height: 32rpx;
    font-size: 28rpx;
    border-left-width: 8rpx;
    text-align: center;
  }

  .gui-cate-left-current {
    border-color: #ff0036 !important;
    background-color: #f6f7f8;
    color: #ff0036;
    font-weight: bold;
  }

  .gui-cate-right-title {
    line-height: 80rpx;
  }

  .gui-cate-product-list {
    margin-bottom: 30rpx;
    margin-right: 25rpx;
  }

  .gui-cate-pimg {
    width: 150rpx;
  }

  .gui-cate-pbody {
    margin-left: 30rpx;
    width: 100rpx;
    flex: 1;
    padding-top: -20rpx;
  }

  .gui-cate-price {
    font-size: 32rpx;
    line-height: 60rpx;
  }

  /* 深色模式 */
  /* #ifndef APP-NVUE */
  @media (prefers-color-scheme: dark) {
    .gui-cate-left-current {
      background-color: #333333;
    }
  }

  /* #endif */
</style>
